import { IRouteComponentProps, NavLink } from 'umi'
import { Layout, Menu } from 'antd'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  AccountBookFilled,
  SearchOutlined,
  BarChartOutlined,
  UserOutlined,
  SettingOutlined
} from '@ant-design/icons';
import layoutStyle from './index.css';
import React, { useState } from 'react';
const { SubMenu } = Menu;
const { Header, Sider, Content } = Layout;
const whiteLists = ['/login']
export default function GlobalLayout({ children, location, route, history, match }: IRouteComponentProps) {
  // console.log('location...', location)
  if (whiteLists.indexOf(location.pathname) !== -1) {
    return children
  }
  const [collapsed, setcollapsed] = useState(false)
  function toggle() {
    setcollapsed(!collapsed)
  }
  return (
    <>
      <Layout className={layoutStyle.layout}>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className={layoutStyle.logo}>
            <img
              src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-favicon.png"
              alt=""
            />
            {collapsed ? null : <span>管理后台</span>}
          </div>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {/* 1. 工作台 */}
            <Menu.Item key="1" icon={<AccountBookFilled/>}>
              <NavLink to="/">
                <span>工作台</span>
              </NavLink>
            </Menu.Item>
            {/* 2. 文章管理 */}
            <SubMenu
              key="sub1"
              title={
                <span>
                  <AccountBookFilled/>
                  <span>文章管理</span>
                </span>
              }
            >
              {/* 2.2  所有文章 */}
              <Menu.Item key="2" icon={<AccountBookFilled/>}>
                <NavLink to="/article">
                  <span>所有文章</span>
                </NavLink>
              </Menu.Item>
              {/* 2.3 分类管理 */}
              <Menu.Item key="3" icon={<AccountBookFilled/>}>
                <NavLink to="/article/category">
                  <span>分类管理</span>
                </NavLink>
              </Menu.Item>
              {/* 2.4标签管理 */}
              <Menu.Item key="4" icon={<AccountBookFilled/>}>
                <NavLink to="/article/tags">
                  <span>标签管理</span>
                </NavLink>
              </Menu.Item>
            </SubMenu>
              {/* 页面管理 */}
            <Menu.Item key="5" icon={<AccountBookFilled/>}>
              <NavLink to="">
                <span>页面管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="6" icon={<AccountBookFilled/>}>
              <NavLink to="">
                <span>知识小册</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="7" icon={<AccountBookFilled/>}>
              <NavLink to="">
                <span>海报管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="8" icon={<AccountBookFilled/>}>
              <NavLink to="">
                <span>评论管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="9" icon={<AccountBookFilled/>}>
              <NavLink to="">  
                <span>邮件管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="10" icon={<AccountBookFilled/>}>
              <NavLink to="">
                <span>文件管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="11" icon={<SearchOutlined/>}>
              <NavLink to="/search">
                <span>搜索记录</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="12" icon={<BarChartOutlined />}>
              <NavLink to="view">
                <span>访问统计</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="13" icon={<UserOutlined />}>
              <NavLink to="user">
                <span>用户管理</span>
              </NavLink>
            </Menu.Item>
            <Menu.Item key="14" icon={<SettingOutlined />}>
              <NavLink to="/setting">
                <span>系统设置</span>
              </NavLink>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout className="site-layout">
        <Header
            style={{
              background: '#fff',
              padding: '0 1rem',
              alignItems: 'center',
              width: '100%',
              display: 'block',
            }}
          >
            {
              collapsed?
              <MenuUnfoldOutlined style={{ float: 'left', lineHeight: '4rem' }} onClick={toggle}/>:
              <MenuFoldOutlined style={{ float: 'left', lineHeight: '4rem' }}  onClick={toggle}/>
            }
            {/* <Icon
              className="trigger"
              type={collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={toggle}
              style={{ float: 'left', lineHeight: '4rem' }}
            /> */}
            <div className={layoutStyle.headerrigin}>
              {/* {user ? (
                JSON.parse(user).avatar ? (
                  <img src={JSON.parse(user).avatar} alt="" />
                ) : (
                  <Avatar icon="user" />
                )
              ) : null}
              <span style={{ paddingLeft: '1rem' }}>Hi!{user ? JSON.parse(user).name : null}</span> */}
            </div>
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </>
  );
}
